import { createWorldTerrain, Viewer } from "cesium";
import { Cartesian3, Color, Math } from "cesium";

export default class map {
  constructor(dom) {
    this.dom = dom;

    this.viewer = null;

    this.initViewer();
    // this.addBox();
    this.addPartialEllipsoid();
  }
  initViewer() {
    this.viewer = new Viewer("map", {
      terrainProvider: createWorldTerrain(),
    });
  }

  addBox() {
    var blueBox = this.viewer.entities.add({
      name: "Blue box",
      position: Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),
      box: {
        dimensions: new Cartesian3(400000.0, 300000.0, 500000.0),
        material: Color.BLUE,
      },
    });

    var redBox = this.viewer.entities.add({
      name: "Red box with black outline",
      position: Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
      box: {
        dimensions: new Cartesian3(400000.0, 300000.0, 500000.0),
        material: Color.RED.withAlpha(0.5),
        outline: true,
        outlineColor: Color.BLACK,
      },
    });

    var outlineOnly = this.viewer.entities.add({
      name: "Yellow box outline",
      position: Cartesian3.fromDegrees(-100.0, 40.0, 300000.0),
      box: {
        dimensions: new Cartesian3(400000.0, 300000.0, 500000.0),
        fill: false,
        outline: true,
        outlineColor: Color.YELLOW,
      },
    });

    this.viewer.zoomTo(this.viewer.entities);
  }

  addCircleAndEllipse() {
    var greenCircle = this.viewer.entities.add({
      position: Cartesian3.fromDegrees(-111.0, 40.0, 150000.0),
      name: "Green circle at height with outline",
      ellipse: {
        semiMinorAxis: 300000.0,
        semiMajorAxis: 300000.0,
        height: 200000.0,
        material: Color.GREEN,
        outline: true, // height must be set for outline to display
      },
    });

    var redEllipse = this.viewer.entities.add({
      position: Cartesian3.fromDegrees(-103.0, 40.0),
      name: "Red ellipse on surface",
      ellipse: {
        semiMinorAxis: 250000.0,
        semiMajorAxis: 400000.0,
        material: Color.RED.withAlpha(0.5),
      },
    });

    var blueEllipse = this.viewer.entities.add({
      position: Cartesian3.fromDegrees(-95.0, 40.0, 100000.0),
      name: "Blue translucent, rotated, and extruded ellipse with outline",
      ellipse: {
        semiMinorAxis: 150000.0,
        semiMajorAxis: 300000.0,
        extrudedHeight: 200000.0,
        rotation: Math.toRadians(45),
        material: Color.BLUE.withAlpha(0.5),
        outline: true,
      },
    });

    this.viewer.zoomTo(this.viewer.entities);
  }

  addPartialEllipsoid() {
    this.viewer.entities.add({
      name: "Dome",
      position: Cartesian3.fromDegrees(121.0, 31.0, 150000),
      ellipsoid: {
        radii: new Cartesian3(200000.0, 200000.0, 200000.0),
        maximumCone: Math.PI,
        material: Color.BLUE.withAlpha(0.3),
        outline: true,
      },
    });
    this.viewer.zoomTo(this.viewer.entities);
  }
}
